<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
<head>
<title>mainpage.jsp</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="/jQuery/jquery-ui-1.8.4.custom/css/smoothness/jquery-ui-1.8.4.custom.css"
		rel="stylesheet" />
<script src="<%=request.getContextPath() %>/jQuery/jquery-1.7.1.min.js" language="javascript"></script>
<script src="<%=request.getContextPath() %>/js/jquery.tableEdit.js" language="javascript"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jQuery/ui/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.datepicker-zh-CN.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/jqGrid/js/grid.locale-cn.js" type="text/javascript"></script>
<script src="<%=request.getContextPath() %>/jQuery/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="<%=request.getContextPath() %>/jQuery/external/jquery.bgiframe-2.1.2.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.core.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.widget.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.tabs.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.mouse.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.button.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.draggable.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.position.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.resizable.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.dialog.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.effects.core.js"></script>
<link type="text/css" href="<%=request.getContextPath() %>/jQuery/ui/start/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<link type="text/css" href="<%=request.getContextPath() %>/new_css/main.css" rel="stylesheet" />
<link type="text/css" href="<%=request.getContextPath() %>/new_css/layout.css" rel="stylesheet" />
<link href="<%=request.getContextPath() %>/new_css/default/style.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath() %>/jQuery/jqGrid/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="<%=request.getContextPath() %>/jQuery/jqGrid/js/grid.locale-cn.js" type="text/javascript"></script>
<script src="<%=request.getContextPath() %>/jQuery/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="<%=request.getContextPath() %>/js/check.js" type="text/javascript"></script>
<style type="text/css">
.cellEdit,.cellDel{
  cursor: pointer;
}
body table{
 font-size:12px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {  
    $(":button").button();   
    js_makeList() ; 
  	$("#dialog:ui-dialog").dialog("destroy");
  	$("#dialogEmployee" ).dialog({
			autoOpen: false,
			height: 250,
			width:400,
			modal: true,
			resizable:false,
			title:"设置用户",
			close: function() {
		  	  
			}
		});
  });
function js_makeList() {
	   jQuery("#userList").jqGrid({
	    url : 'register!initUserList.do' ,
	    datatype : "xml",
	    autowidth: true, 
	    colNames : [ '账号','姓名', '用户角色', '操作'],
	    colModel : [{name : 'accountNo', index : 'accountNo', width : 200, align : "center", sortable : false}, 
	        	    {name : 'userName', index : 'userName', width : 200, align : "center", sortable : false},
	           	    {name : 'roleName', index : 'roleName', width : 300, align : "center", sortable : false},
	      			{name : 'colOper', index : 'colOper', width : 120, align : "center", sortable : false}],
	    height: 'auto',
	    subGrid: false,
	    rowNum:200,
   gridComplete : function() {
     var graduateIds = jQuery("#userList").jqGrid('getDataIDs');
     for ( var i = 0; i < graduateIds.length; i++) {
       var cl = graduateIds[i];
       var link = "<a class='cellEdit' title='编辑' value='"
           + cl+ "'>编辑</a><a class='cellDel' title='删除' value='"
           + cl + "'> 删除</a>";
       jQuery("#userList").jqGrid('setRowData', cl, {
         colOper : link
       });
     }
   }
	 });
	  $(".cellEdit").live('click', function() {
		   var id = $(this).attr("value");
		   $.ajax({
             type : "POST",
             url : "register!edit.do?userId="+id,
             dataType : "json",
             error : function() {},
             success : function(data, textStatus) {
    			var json = eval(data);
               if (json!= ""||json!=null) {
                 $("#dialogEmployee").dialog("open");
                 $("#userName").val(json.user.userName);
                  $("#password").val(json.user.userPassword);
                  $("#userId").val(json.user.userId);
                  $("#userType").val(json.user.userType);
                  $("#accountNo").val(json.user.accountNo);
                 } else {
                 alert("系统出错");
               }
             }
       });
		});
	  $(".cellDel").live('click', function() {
		   var id = $(this).attr("value");
		   if(!confirm("确认删除吗？")){
                  return false;
			 }
		   $.ajax({
            type : "POST",
            url : "register!deleteUser.do?user.userId="+id,
            dataType : "json",
            error : function() {},
            success : function(data, textStatus) {
   			var json = eval(data);
              if (json.success) {
            	  alert(json.message);
                  window.location.href="user!initUserPage.do";
                } else {
                  alert(json.message);
              }
            }
      });
		});
	}
function reset(){
	 $("#userId").val("");
	$("#userName").val("");
	$("#password").val("");
	$("#userType").val("");
	$("#accountNo").val("");
}
function add(){
	   reset();
	   $.ajax({
           type : "POST",
           url : "register!initRole.do",
           dataType : "json",
           error : function() {},
           success : function(data, textStatus) {
  			var json = eval(data);
            if(json!=null&&json!=""){
            	var option=document.getElementById("userType");
                var html="<option value=''>--请选择--</option>";
                option.innerHTML = html;
                
                for(var i=0;i<json.roleList.length; i++){
                     html=html+"<option value='"+json.roleList[i].roleId+"'>"+json.roleList[i].roleName+"</option>";
                }                
                 option.innerHTML=html;
               
             }
            $("#dialogEmployee").dialog("open");
           }
           
     });
	  
}
function save(){
	
	 $.ajax({
         type : "POST",
         url : "register!saveUser.do",
         data: $("#form").serialize(),
         dataType : "json",
         error : function() {},
         success : function(data, textStatus) {
			var json = eval(data);
           if (json.success) {
        	   alert(json.message);
               $("#dialogEmployee").dialog("close");
               window.location.href="user!initUserPage.do";
             } else {
               alert(json.message);
           }
         }
   });
}
	function checkInput(){
		var msg="";
		 if($("#userName").val()==""){
   	         msg+="姓名不可为空!"+"\n";
	       }
		 if($("#accountNo").val()==""){
			 msg+="账号不可为空!"+"\n";
			}else{
			  if(isChinese($("#accountNo").val())){
		         msg+="账号不可设置中文!"+"\n";
		     }
		  }
		
		 if($("#password").val()==""){
	   	     msg+="请输入密码!"+"\n";
	      }
		 if($("#userType").val()==""){
   	         msg+="请选择角色!"+"\n";
         }
       return msg;
	
}
function IsExist(){
	var msg=checkInput();
	if(msg!=""){
      alert(msg);
      return false;
	}
	 $.ajax({
         type : "POST",
         url : "register!checkUser.do",
         data: $("#form").serialize(),
         dataType : "json",
         error : function() {},
         success : function(data, textStatus) {
			var json = eval(data);
           if (json.message=="") {
               save();
        	 } else {
               alert(json.message);
           }
         }
   });
}
function isChinese(s) //判断字符是否是中文字符
{
var patrn= /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
if (!patrn.exec(s))
{
return false;
}else{
return true;
}
} 
</script>
</head>

<body>
<table align="left" style="margin-top: 10px; margin-left: 18px; width: 400px;">
	<tr>
		<td  colspan="3" style="text-align: right;">
		  <input type="button" value="新增" onclick="add();"/>
		</td>
	</tr>
	<tr>
   		<td>
   			<table id="userList"></table>
   		</td>
	</tr>
</table>
<div id="dialogEmployee">
  <form id="form">
	  <table cellspacing="0" class="uinfortable" style="width: 100%">
	  	   <tr>
	          <th>姓名：</th>
	          <td>
	            <input id="userName" type="text" name="user.userName" />
	            <input id="userId" type="hidden" name="user.userId">
	          </td>
	       </tr>
	       <tr>
	          <th>帐号：</th>
	          <td>
	            <input id="accountNo" type="text" name="user.accountNo" />
	          </td>
	       </tr>
	       <tr>
	          <th>密    码：</th>
	          <td>
	            <input id="password"  type="password" name="user.userPassword" style="width: 200px;height: 25px;"/>
	          </td>
	       </tr>
	       <tr>
	          <th>角    色：</th>
	          <td>
	             <select id="userType" name="user.userType" style="width: 200px;">
	                <option value="">--请选择--</option>
	             <s:iterator value="roleList" id="list">
	                <option value="<s:property value='roleId'/>"> <s:property value="roleName"/></option>
	             </s:iterator>
	             </select>
	          </td>
	       </tr>
	        <tr>
	          <td colspan="3" style="text-align: center;">
	            <input type="button" onclick="IsExist()" value="保存"/>
	            <input type="button" onclick="reset()" value="重置"/>
	           
	          </td>
	       </tr>
	  </table> 
   </form>
</div>
</body>
</html>
